﻿<div class="zui-pageContent">
    <div class="zui-doc">
        <h3 class="page-header">事件列表</h3>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>参数</th>
                    <th>描述</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <a name="event_onEndEdit" key="onEndEdit" class="linkname"></a>onEndEdit</td>
                    <td>(editParm)</td>
                    <td class="description">&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="event_onRowDragDrop" key="onRowDragDrop" class="linkname"></a>onRowDragDrop</td>
                    <td>(editParm) {rows,parent,near,after}</td>
                    <td class="description">&nbsp;</td></tr>
                <tr>
                    <td>
                        <a name="event_onDragCol" key="onDragCol" class="linkname"></a>onDragCol</td>
                    <td>&nbsp;</td>
                    <td class="description">拖动列事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onToggleCol" key="onToggleCol" class="linkname"></a>onToggleCol</td>
                    <td>&nbsp;</td>
                    <td class="description">切换列事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onChangeSort" key="onChangeSort" class="linkname"></a>onChangeSort</td>
                    <td>&nbsp;</td>
                    <td class="description">改变排序事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onSuccess" key="onSuccess" class="linkname"></a>onSuccess</td>
                    <td>(data, grid)</td>
                    <td class="description">成功获取服务器数据的事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onDblClickRow" key="onDblClickRow" class="linkname"></a>
                        <a href="#link29" title="点击查看示例">onDblClickRow</a></td>
                    <td>(data,rowid,rowdata)</td>
                    <td class="description">双击行事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onSelectRow" key="onSelectRow" class="linkname"></a>onSelectRow</td>
                    <td>(rowdata, rowid, rowobj)</td>
                    <td class="description">选择行事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onUnSelectRow" key="onUnSelectRow" class="linkname"></a>onUnSelectRow</td>
                    <td>(rowdata, rowid, rowobj)</td>
                    <td class="description">取消选择行事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeCheckRow" key="onBeforeCheckRow" class="linkname"></a>onBeforeCheckRow</td>
                    <td>(checked, data, rowid, rowdata)</td>
                    <td class="description">选择前事件，可以通过return false阻止操作(复选框)</td></tr>
                <tr>
                    <td>
                        <a name="event_onCheckRow" key="onCheckRow" class="linkname"></a>onCheckRow</td>
                    <td>(checked,data,rowid,rowdata)</td>
                    <td class="description">选择事件(复选框)</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeCheckAllRow" key="onBeforeCheckAllRow" class="linkname"></a>onBeforeCheckAllRow</td>
                    <td>(checked,element)</td>
                    <td class="description">选择前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onCheckAllRow" key="onCheckAllRow" class="linkname"></a>onCheckAllRow</td>
                    <td>(checked,element)</td>
                    <td class="description">选择事件(复选框 全选/全不选)</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeShowData" key="onBeforeShowData" class="linkname"></a>onBeforeShowData</td>
                    <td>(currentData)</td>
                    <td class="description">显示数据前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onAfterShowData" key="onAfterShowData" class="linkname"></a>onAfterShowData</td>
                    <td>(currentData)</td>
                    <td class="description">显示完数据事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onError" key="onError" class="linkname"></a>onError</td>
                    <td>(XMLHttpRequest, textStatus, errorThrown)</td>
                    <td class="description">错误事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onSubmit" key="onSubmit" class="linkname"></a>onSubmit</td>
                    <td>&nbsp;</td>
                    <td class="description">提交前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onReload" key="onReload" class="linkname"></a>onReload</td>
                    <td>(grid)</td>
                    <td class="description">刷新事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onToFirst" key="onToFirst" class="linkname"></a>onToFirst</td>
                    <td>(element)</td>
                    <td class="description">第一页</td></tr>
                <tr>
                    <td>
                        <a name="event_onToPrev" key="onToPrev" class="linkname"></a>onToPrev</td>
                    <td>(element)</td>
                    <td class="description">上一页</td></tr>
                <tr>
                    <td>
                        <a name="event_onToNext" key="onToNext" class="linkname"></a>onToNext</td>
                    <td>(element)</td>
                    <td class="description">下一页</td></tr>
                <tr>
                    <td>
                        <a name="event_onToLast" key="onToLast" class="linkname"></a>onToLast</td>
                    <td>(element)</td>
                    <td class="description">最后一页</td></tr>
                <tr>
                    <td>
                        <a name="event_onAfterAddRow" key="onAfterAddRow" class="linkname"></a>onAfterAddRow</td>
                    <td>(rowdata)</td>
                    <td class="description">增加行后事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeEdit" key="onBeforeEdit" class="linkname"></a>
                        <a href="#link46" title="点击查看示例">onBeforeEdit</a></td>
                    <td>(editParm)</td>
                    <td class="description">编辑前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeSubmitEdit" key="onBeforeSubmitEdit" class="linkname"></a>onBeforeSubmitEdit</td>
                    <td>(editParm)</td>
                    <td class="description">验证编辑器结果是否通过</td></tr>
                <tr>
                    <td>
                        <a name="event_onAfterEdit" key="onAfterEdit" class="linkname"></a>onAfterEdit</td>
                    <td>(editParm)</td>
                    <td class="description">结束编辑后事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onLoading" key="onLoading" class="linkname"></a>onLoading</td>
                    <td>&nbsp;</td>
                    <td class="description">加载时函数</td></tr>
                <tr>
                    <td>
                        <a name="event_onLoaded" key="onLoaded" class="linkname"></a>onLoaded</td>
                    <td>(grid)</td>
                    <td class="description">加载完函数</td></tr>
                <tr>
                    <td>
                        <a name="event_onContextmenu" key="onContextmenu" class="linkname"></a>
                        <a href="#link51" title="点击查看示例">onContextmenu</a></td>
                    <td>({data,rowindex,row},e)</td>
                    <td class="description">右击事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeCancelEdit" key="onBeforeCancelEdit" class="linkname"></a>onBeforeCancelEdit</td>
                    <td>&nbsp;</td>
                    <td class="description">取消编辑前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onAfterSubmitEdit" key="onAfterSubmitEdit" class="linkname"></a>onAfterSubmitEdit</td>
                    <td>({record,rowindex,newdata})</td>
                    <td class="description">编辑后事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onGroupExtend" key="onGroupExtend" class="linkname"></a>onGroupExtend</td>
                    <td>()</td>
                    <td class="description">分组展开事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onGroupCollapse" key="onGroupCollapse" class="linkname"></a>onGroupCollapse</td>
                    <td>()</td>
                    <td class="description">分组收缩事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onLoadData" key="onLoadData" class="linkname"></a>onLoadData</td>
                    <td>()</td>
                    <td class="description">加载数据前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onBeforeSelectRow" key="onBeforeSelectRow" class="linkname"></a>onBeforeSelectRow</td>
                    <td>()</td>
                    <td class="description">选择前事件</td></tr>
                <tr>
                    <td>
                        <a name="event_onHeaderCellBulid" key="onHeaderCellBulid" class="linkname"></a>onHeaderCellBulid</td>
                    <td>()</td>
                    <td class="description">头部单元格创建事件</td></tr>
            </tbody>
        </table>

                                                                                                                                                               <a name="link29"></a>
        <h3 class="event">onDblClickRow事件 示例：</h3>
        <pre>
onDblClickRow : function (data, rowindex, rowobj) {
    $.ligerDialog.alert('选择的是' + data.CustomerID);
}
        </pre>

        <h3 class="event">onBeforeEdit事件 示例：</h3>
        <pre>
&lt;script type=&quot;text/javascript&quot;&gt;
    var DepartmentList = DepartmentData.Rows;
    var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
    $(f_initGrid); 

    function f_initGrid()
    {
        $(&quot;#maingrid&quot;).ligerGrid({
            columns: [
            { display: '主键', name: 'ID', width: 50, type: 'int' },
            { display: '名字', name: 'RealName',
                editor: { type: 'text' }
            },
            { display: '性别', width: 50, name: 'Sex',
                editor: { type: 'select', data: sexData, valueField: 'Sex' },
                render: function (item)
                {
                    if (parseInt(item.Sex) == 1) return '男';
                    return '女';
                }
            },
            { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
            { display: '入职日期', name: 'IncomeDay', type: 'date', width: 100, editor: { type: 'date'} },
            {
                display: '部门', name: 'DepartmentID', width: 120, isSort: false, textField: 'DepartmentName',
            editor: { type: 'select', data: DepartmentList, valueField: 'DepartmentID', textField: 'DepartmentName' } 
            },
            { display: '地址', name: 'Address',
                editor: { type: 'text' }, align: 'left', width: 300
            }
            ],
            enabledEdit: true, isScroll: false,
            onBeforeEdit: f_onBeforeEdit,
            onBeforeSubmitEdit: f_onBeforeSubmitEdit,
            onAfterEdit: f_onAfterEdit,
            data: EmployeeData,
            width: '100%'
        });
    }
    //只允许编辑前3行
    function f_onBeforeEdit(e)
    { 
        if(e.rowindex&lt;=2) return true;
        return false;
    }
    //限制年龄
    function f_onBeforeSubmitEdit(e)
    { 
        if (e.columnname == &quot;Age&quot;)
        {
            if (e.value &lt; 20 || e.value &gt; 30) return false;
        }
        return true;
    }
    //编辑后事件 
    function f_onAfterEdit(e)
    {
        if (e.columnname == &quot;Age&quot;)
        {
            alert(e.value);
        }
    }
    function getSelected()
    {
        var manager = $(&quot;#maingrid&quot;).ligerGetGridManager();
        var row = manager.getSelectedRow();
        if (!row) { alert('请选择行'); return; }
        alert(JSON.stringify(row));
    }
    function getData()
    {
        var manager = $(&quot;#maingrid&quot;).ligerGetGridManager();
        var data = manager.getData();
        alert(JSON.stringify(data));
    } 
&lt;/script&gt;
        </pre>

        <a name="link51"></a>
        <h3 class="event">onContextmenu事件 示例：</h3>
        <pre>
menu = $.ligerMenu({ width: 120, items:
    [
        { text: '增加', click: itemclick, icon: 'add' },
        { text: '修改', click: itemclick },
        { line: true },
        { text: '查看', click: itemclick }
    ]
}); 
grid = $(&quot;#maingrid4&quot;).ligerGrid({ 
    columns: [
        { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
        { display: '公司名', name: 'CompanyName', minWidth: 60 },
        { display: '联系名', name: 'ContactName', minWidth: 140 },
        { display: '城市', name: 'City' }
    ], pageSize: 30, data: CustomersData, sortName: 'CustomerID',
    width: '100%', height: '100%', onRClickToSelect:true,
    onContextmenu : function (parm,e)
    {
        actionCustomerID = parm.data.CustomerID;
        menu.show({ top: e.pageY, left: e.pageX });
        return false;
    } 
});
        </pre>
    </div>
</div>
<div class="zui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>